.header {
  background: url("../img/page9/title.png") center no-repeat;
}

.main-content {
  padding: 0 20px 20px 20px !important;

  .left-container {
    position: relative;
    float: left;
    width: 407px;

    #map {
      width: 100%;
      height: 100%;
    }

    .map-change {
      z-index: 99;
      position: absolute;
      bottom: 10px;
      left: 30%;

      >ul {
        >li {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
          cursor: pointer;
          color: #858dc8;
          border: 1px solid #858dc8;
          padding: 3px 11px;
          border-radius: 4px;

          &:hover,
          &.active {
            color: #4aeaf4;
            border: 1px solid #4aeaf4;
          }
        }
      }
    }
  }

  .middle-container {
    float: left;
    width: 1030px;
    margin-left: 18px;

    .sum-list {
      width: 100%;
      height: 111px;
      margin-top: 44px;

      .sum-detail {
        width: 333px;
        height: 111px;
        background: url("../img/page9/middle.png");

        .icon-text {
          width: 72% !important;
          padding-top: 0 !important;
          line-height: 105px;

          .text-name {
            margin-left: -20px;
          }

          .text-number {
            font-weight: normal !important;
            font-size: 18px !important;
            float: right;
            color: #00deff;
            margin-right: 30px;

            span {
              font-weight: bold;
              font-size: 40px;
            }
          }
        }

        .icon {
          width: 28% !important;

          &.icon1 {
            background: url("../img/page9/icon1.png") center no-repeat;
          }

          &.icon2 {
            background: url("../img/page9/icon2.png") center no-repeat;
          }

          &.icon3 {
            background: url("../img/page9/icon3.png") center no-repeat;
          }
        }
      }
    }

    .carousel {
      position: relative;
      width: 100%;
      height: 796px;

      .caro-main {
        position: relative;
        height: 100%;

        img {
          display: block;
          margin: 0 auto;
        }

        .caro-text {
          position: absolute;
          bottom: 60px;
          left: 224px;
          font-size: 24px;
          width: 554px;
          padding: 10px 0;
          height: 107px;
          text-align: center;
          background: url("../img/page9/middle-bg.png");

          .name {
            font-size: 28px;
            letter-spacing: 2px;
            line-height: 46px;
          }
        }
      }
    }
  }

  .right-container {
    float: right;
    width: 407px;
  }
}

.table-container {
  position: relative;
  margin-bottom: 10px;

  .title {
    width: 100%;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
    margin-bottom: 10px;
    background: url("../img/page9/title-bg.png") 20px center no-repeat;

    .unit {
      padding-right: 40px;
      float: right;
      color: #00fcff;
      font-size: 18px;
      line-height: 33px;
    }
  }

  .chart-container {
    position: relative;
    width: 407px;
    height: 268px;
    background: url("../img/page9/bg.png");

    &.factory {
      padding: 15px;

      img {
        display: block;
        margin: 0 auto;
      }

      .tooltip-factory-text {
        padding-top: 5px;
        text-indent: 32px;
        line-height: 25px;
      }
    }

    &.caro-main {
      position: relative;

      ul {
        width: 100%;
        height: 100%;
        padding: 7px 17px 5px 17px !important;
      }

      overflow: hidden;

      .order-list {
        position: relative;
        width: 100%;
        height: 82px;
        line-height: 40px;

        &::after {
          position: absolute;
          bottom: 42px;
          content: "";
          width: 369px;
          height: 3px;
          background: url("../img/page9/right-chart3.png") no-repeat;
        }

        .name {
          font-size: 15px;

          span {
            font-size: 16px;
            font-weight: bold;
            margin-right: 15px;
          }
        }

        .detail {
          .num {
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            margin-right: 15px;

            span {
              color: #33fffe;
            }
          }

          .progress {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 280px;
            height: 11px;
            background: url("../img/page9/pro-bg.png")left repeat-x;

            .inner {
              height: 100%;
              background: url("../img/page9/pro-blue-bg.png") left repeat-x;
            }
          }
        }
      }
    }
  }
}